<script>
export default {
  name: "MendianComponent1",
  data: function () {
    return {
      value1: '',
      dialogVisible: false,
      input:"",
      dialogFormVisible: false,
      dialogFormVisible1:false,
      form: {
        name: '',
        price:'',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      list:"",
      currentPage: 1,
      pageSize: 10,
      addressAll: [],   //省市区
      address: [], //你选择的地址
      newAddress:"",
      newAddress1:"",
      newAddress2:"",
      newAdd:"",
      allShangpin:"",
      sahngpinname:"",
      imageUrl: "",

      addTime : "",
      goodsCartCount : "",
      goodsId : "",
      goodsImage : "",
      goodsName : "",
      goodsPresentPrice : "",
      goodsSalesVolume : "",
      goodsShopName : "",
      goodsStatus : "",
      goodsUnit : "",
      shopCategoryId : "",
      shopId : "",
    }
  },
  created: function () {
    this.axios.request("/shop/getPanghuShopGoodsList", {
      params: {
        pageNum: 1,
        pageSize: 10,
        keyword:"",
        goodsStatus:"",
        startTime:"",
        endTime:"",
        shopId: this.shopid.shopId
      }
    }).then((res) => {

      this.allShangpin = res.data.data;
      this.list = this.allShangpin.list;
      console.log(
          this.allShangpin
      )
    }).catch((err) => {

    })
  },
  computed:{
    shopid:function (){
      return this.$route.query;
    }
  },
  methods:{
    search(){
      console.log(this.value1);
      this.axios.request("/shop/getPanghuShopGoodsList", {params:{
          pageNum: 1,
          pageSize: 10,
          keyword:this.sahngpinname,
          goodsStatus:"",
          shopId: this.shopid.shopId,
          startTime:this.value1[0],
          endTime:this.value1[1]
        }}).then((res)=>{
        this.allShangpin = res.data.data;
        this.list = this.allShangpin.list;
        console.log(
            this.allMendian
        )
      }).catch((err)=>{
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    newAddShangpin() {
      this.dialogFormVisible = false;
      this.axios.post("/goods/addShopGoods", {
        goodsImage: this.imageUrl,
        goodsName: this.form.name,
        goodsPresentPrice: this.form.price,
        goodsUnit: "",
        shopId: this.shopid.shopId,
      }).then((res) => {

      }).catch((err) => {
      })
    },
    handleClick1(row){
      this.dialogFormVisible1 = true;
      this.addTime = row.addTime;
      this.goodsCartCount = row.goodsCartCount;
      this.goodsId = row.goodsId;
      this.goodsImage = row.goodsImage;
      this.goodsName = row.goodsName;
      this.goodsPresentPrice = row.goodsPresentPrice;
      this.goodsSalesVolume = row.goodsSalesVolume;
      this.goodsShopName = row.goodsShopName;
      this.goodsStatus = row.goodsStatus;
      this.goodsUnit = row.goodsUnit;
      this.shopCategoryId = row.shopCategoryId;
      this.shopId = row.shopId;



      this.form.name = row.goodsName;
      this.imageUrl = row.goodsImage;
      this.form.price = row.goodsPresentPrice;
    },
    updateShangpin(){
      this.dialogFormVisible1 = false;
      console.log(this.shopId);
      this.axios.post("/goods/modifyShopGoods", {
        addTime : this.addTime,
        goodsCartCount : this.goodsCartCount,
        goodsId : this.goodsId,
        goodsImage : this.imageUrl,
        goodsName : this.form.name,
        goodsPresentPrice : this.form.price,
        goodsSalesVolume : this.goodsSalesVolume,
        goodsShopName : this.goodsShopName,
        goodsStatus : this.goodsStatus,
        goodsUnit : this.goodsUnit,
        shopCategoryId : this.shopCategoryId,
        shopId : this.shopId,
      }).then((res)=>{

      }).catch((err)=>{
      })
    },
  }
}
</script>

<template>
  <div class="mendianguanli">
    <div class="commodityTop">
      <img :src="this.shopid.imgSrc" class="imgs">
      <div class="nameBox">
        <div class="shopName basicLi">{{this.shopid.shopName}}</div>
        <span >上架中</span></div>
      <div class="basicBox">
        <div class="basicLi"><span>门店手机号：{{this.shopid.shopPhone}}</span></div>
        <div class="basicLi"><span>门店详细地址：{{this.shopid.shopAddress}}</span></div>
        <div class="basicLi"><span>营业时间：{{this.shopid.shopDescribe}}</span></div>
      </div>
      <div class="basicBox">
        <div class="basicLi"><span>添加时间：{{this.shopid.addTime}}</span></div>
      </div>
    </div>
    <div class="seachLi">
      <span class="serachLabel">商品标题：</span>
      <input v-model="sahngpinname" type="text" class="el-input__inner">
      <span class="demonstration">发布日期：</span>
      <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <el-button id="btn1" type="primary" icon="el-icon-search" @click="search">搜索</el-button>

        <el-button id="btn2" type="primary" @click="dialogFormVisible = true">新增商品</el-button>

      <el-dialog width="850px" title="新增商品" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="商品名字" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品图片" :label-width="formLabelWidth">
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="true"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品现价" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-button @click="newAddShangpin" style="margin-left: 700px">保存</el-button>
        </el-form>
      </el-dialog>
      <el-dialog width="850px" title="编辑商品" :visible.sync="dialogFormVisible1">
        <el-form :model="form">
          <el-form-item label="商品名字" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品图片" :label-width="formLabelWidth">
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="true"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品现价" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-button @click="updateShangpin" style="margin-left: 700px">保存</el-button>
        </el-form>
      </el-dialog>
      <el-table :data="list"
                border
                style="width: 1160px"
                :header-cell-style="{'background-color': '#409EFF', color:'#fff'}">
        <el-table-column
            fixed
            prop="goodsImage"
            label="商品图片"
            width="200">
        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="商品名字"
            width="200">
        </el-table-column>
        <el-table-column
            prop="goodsPresentPrice"
            label="商品现价"
            width="200">
        </el-table-column>
        <el-table-column
            prop="goodsSalesVolume"
            label="商品销量"
            width="200">
        </el-table-column>
        <el-table-column
            prop="goodsCartCount"
            label="商品购物车数量"
            width="200">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick1(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
.mendianguanli {
  height: 1000px;
}
.commodityTop{
  display: flex;
  margin-bottom: 20px;
}
.imgs{
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}
.nameBox{
  display: inline-block;
  width: 200px;
  height: 100px;
  vertical-align: top;
}
.basicBox
{
  display: inline-block;
  height: 100px;
  vertical-align: top;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.el-input__inner{
  width: 200px;
}
#btn1{
  margin-left: 20px;
}
#btn2{
  margin-top: 30px;
  margin-bottom: 15px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>